<%--
  Created by IntelliJ IDEA.
  User: Aqqqwer
  Date: 2021/7/6
  Time: 15:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册页面</title>
</head>
<style>
   @import "/css/daohang.css";
   @import "/css/header.css";
</style>
<script src="/js/jquery/jquery-3.3.1.js"></script>
<script>
    /**
     * 检查邮箱
     */
    function checkEmail(){
        var email=$('#email-text').val();
        if(''==email)
        {
            alert('请填写邮箱');
            return;
        }
        //验证邮箱的格式
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!reg.test(email))
        {
            alert('邮箱格式错误!!!');
            return;
        }
        //发送AJAX请求,检查邮箱是否被注册
        $.ajax({
            url:'/user/check_email',
            type:'POST',
            data:{email:email},
            dataType:'json',
            success:function (jsonData){
                if(0==jsonData){
                    alert('系统已发送验证码邮件至:'+email);
                }else if(1==jsonData)
                {
                    alert('该邮箱已注册');
                }else
                {
                    alert('检查邮箱是否被注册,返回未知状态!!!');
                }
            },
            error:function(){
                alert('检查邮箱是否被注册,运行异常');
            }

        });
    }

    /**
     * 用户注册
     */
    function userRegister(){
        var email=$('#email-text').val();
        if(''==email)
        {
            alert('请填写邮箱');
            return;
        }
        //验证邮箱的格式
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!reg.test(email))
        {
            alert('邮箱格式错误!!!');
            return;
        }

       var codes=$('#codes-text').val();
       if(''==codes)
       {
           alert('请输入邮件验证码!!!');
           return;
       }
       var codesReg=/^\d{6}$/;
       if(!codesReg.test(codes))
       {
         alert('验证码格式错误,由6位数字组成');
         return;
       }
       var password=$('#password-input').val();
       if(''==password)
       {
           alert('请输入密码');
           return;
       }
       //密码规则
       var pwdReg=/^(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}$/;
       if(!pwdReg.test(password))
       {
          alert('密码由字母、数字、其它符号组成,长度为8到30');
          return;
       }
       var confirmPwd=$('#confirm-pwd-input').val();
       if(''==confirmPwd)
       {
           alert('请填写确认密码');
           return;
       }
       if(confirmPwd!=password)
       {
           alert('两次输入密码不一致!!!!');
           return;
       }
       if(window.confirm('确定要注册会员吗?'))
       {
           //js提交form表单
           $('form').submit();
       }

    }
</script>
<div class="header_bd">
    <!-- 头部 -->

    <div class="header" >
        <h1><img style="height: 50px;width: 180px"
                 src="">
        </h1>
        <form>
            <input type="text" name="search" placeholder="Search.." class="search">
        </form>
        <button class="searchButton searchButton2">立即搜索</button>
        <div class="login"  >
            <!-- 登录 -->
            <!-- 注册 -->
            <span><a href="login_user.jsp" ><input type="button" class="dlspan" value="登 录" /></a></span>&nbsp;&nbsp;
            <span><a href="register_user.jsp" ><input type="button" class="zcspan" value="注 册" /></a></span>
        </div>
    </div>
    <div>
        <div class="topNav">
            <!-- 导航栏 -->
            <div style="float: left;">
                <button style="" class="links_button button dropdown">
                    <a href="tuijian.jsp" style="text-decoration: none">推荐</a>
                    <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
                </button>
                <button style="" class="links_button button dropdown">
                    <a href="yingshi.jsp" style="text-decoration: none">影视</a>
                    <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
                </button>
                <button style="" class="links_button button dropdown">
                    <a href="yinyue.jsp" style="text-decoration: none">音乐</a>
                    <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
                </button>
                <button style="" class="links_button button dropdown">
                    <a href="youxi.jsp" style="text-decoration: none">游戏</a>
                    <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
                </button>
                <button style="" class="links_button button dropdown">
                    <a href="tiyu.jsp" style="text-decoration: none">体育</a>
                    <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
                </button>
                <button style="" class="links_button button dropdown">
                    <a href="zongyi.jsp" style="text-decoration: none">综艺</a>
                    <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
                </button>
                <button style="" class="links_button button dropdown">
                    <a href="yule.jsp" style="text-decoration: none">娱乐</a>
                    <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
                </button>
                <button style="" class="links_button button dropdown">
                    <a href="dongman.jsp" style="text-decoration: none">动漫</a>
                    <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
                </button>
                <button style="" class="links_button button dropdown">
                    <a href="shenghuo.jsp" style="text-decoration: none">生活</a>
                    <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
                </button>
                <button style="" class="links_button button dropdown">
                    <a href="meishi.jsp" style="text-decoration: none">美食</a>
                    <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
                </button>
                <button style="" class="links_button button dropdown">
                    <a href="chongwu.jsp" style="text-decoration: none">宠物</a>
                    <span class="dropdown-content">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </span>
                </button>
            </div>
        </div>
    </div>
</div>
<body>
<div style="width:100%;height:100%">
<form action="/user/register" method="post">
    <div style="background-image: linear-gradient(to bottom right, white,aqua); border-radius: 25px;width:450px;height:300px;position: fixed;left: 500px;top:200px">
    <ul style="list-style: none;line-height: 28px">
        <li><h3 style="text-align:center;border-radius: 15px;letter-spacing:15px">用户注册</h3></li>
        <li><span>邮箱:<input  style="border-radius: 15px;" id="email-text" type="email" name="email" placeholder="请输入邮箱" required><button type="button" onclick="checkEmail()">发送验证码</button></span></li>
        <li><span>验证码:</span>
             <input  style="border-radius: 15px;" id="codes-text" type="text" name="codes">
        </li>
        <li><span>密码:<input  style="border-radius: 15px;" id="password-input" type="password" name="password"  placeholder="请输入密码" required></span></li>
        <li><span>确认密码:<input  style="border-radius: 15px;" id="confirm-pwd-input" type="password" name="confirmPwd"  placeholder="请确认密码" required></span></li
        <li>
            <span ><button type="button" onclick="userRegister()">注册会员</button>
                <button type="reset">重新填写</button></span>
        </li>
        <li><a href="login_user.jsp">已有账号，直接登录</a></li>
    </ul>
    </div>
</form>
</div>
</body>
</html>
